<script setup lang="ts">
import Img1 from "../assets/bar/ad1.png";
import Img2 from "../assets/bar/ad2.jpg";
import Img3 from "../assets/getAvatar.do.jpg";
import Header from "../views/header.vue";
import MyView from "../views/Myview.vue";
import Footer from "../views/foot.vue";
import {ref, reactive, Ref} from "vue";

const myTag: Array<String> = reactive([
  "家用电器",
  "手机/数码",
  "家具/电器",
  "素食/卤味",
  "坚果/炒货",
  "糖果/蜜饯",
  "巧克力",
  "海味/海鲜",
  "花茶/果茶",
  "品牌/礼包",
]);
let tags: Ref<any> = ref(new Map([
  ["生活电器", ["取暖电器", '吸尘器', '净化器', '扫地机器人']],
  ["厨房小电", ["电饭煲", "微波炉", "烤箱", "电烤箱", "电磁炉", "电压力锅"]]
]))

function showType(index: number) {
  switch (index) {
    case 0:
      tags.value = new Map([
        ["生活电器", ["取暖电器", '吸尘器', '净化器', '扫地机器人']],
        ["厨房小电", ["电饭煲", "微波炉", "烤箱", "电烤箱", "电磁炉", "电压力锅"]]
      ]);
      show.value = true;
      break;
    case 1:
      tags.value = new Map([
        ["手机", ["手机", "对讲机", "以旧换新", "手机维修"]],
        ["数码配件", ["存储卡", "三脚架/云台", "相机包", "滤镜", "闪光灯", "相机清洗"]],
        ["智能设备", ["智能手环", "智能手表", "智能眼睛", "智能机器人", "运动跟踪器", "智能家居", "体感机"]]
      ]);
      show.value = true;
      break;
    case 2:
      tags.value = new Map([
          ["家具",["卧室家具","客厅家具","餐厅家具","书房家具","儿童家具"]],
          ["灯具",["台灯","吸顶灯","LED灯","节能灯","落地灯"]],
          ["厨具",["烹饪厨具","刀剪菜饭","水具酒具","茶具","咖啡具"]]
      ]);
      show.value = true;
      break;
    case 3:
      tags.value = new Map([
          ["豆干",["蒸蛋糕","脱水蛋糕","瑞士卷","铜锣烧"]],
          ["干笋",["蒸蛋糕","脱水蛋糕","瑞士卷","铜锣烧"]],
          ["鸭脖",["蒸蛋糕","脱水蛋糕","瑞士卷","软面包","马卡龙","千层饼","甜甜圈","蒸三明治","铜锣烧"]]
      ]);
      show.value = true;
      break;
    default:
      show.value = true;
      break;
  }
}

const myAddressLink: Array<Object> = reactive([Img1, Img2]);
let show: Ref<boolean> = ref(false)

</script>

<template>
  <div class="marginLR">
    <Header style="margin-bottom: 30px"/>
    <el-row class="border-orange-500 border-b-2">
      <el-col :span="5">
        <ul>
          <li>
            <div class="myAllType" style="padding-left: 0; padding-right: 0">
              全部分类
            </div>
          </li>
        </ul>
      </el-col>
      <el-col :span="10" :offset="1" class="middle">
        <div class="myTag">首页</div>
        <span style="color: #aeaeae">|</span>
        <div class="myTag">闪购</div>
        <span style="color: #aeaeae">|</span>
        <div class="myTag">闪购</div>
        <span style="color: #aeaeae">|</span>
        <div class="myTag">闪购</div>
        <span style="color: #aeaeae">|</span>
        <div class="myTag">全球购</div>
      </el-col>
    </el-row>
    <el-row class="relative">
      <el-col :span="5">
        <div>
          <ul>
            <li @mouseover="showType(index)" @mouseleave="show=false"
                class="t-center bg-black bg-opacity-70 text-white hover:bg-white hover:text-black"
                v-for="(tag,index) in myTag" :key="index">{{
                tag
              }}
            </li>
          </ul>
        </div>
      </el-col>
      <el-col @mouseover="show=true" @mouseleave="show=false" :span="19" :offset="5" class=" w-full z-30 absolute">
        <div class="bg-white animate__animated animate__fadeIn pt-7 pl-4"
             style="box-shadow: 4px 3px 11px #8c8c8c;height: 440px" :class="show?'block':'hidden'">
          <el-row>
            <el-col :span="10" :offset="2" v-for="(itemfather,index) of tags.keys()">
              <div class="text-red-600 font-bold">{{ itemfather }}</div>
              <div class="" style="padding-left: 0">
                <el-tag type="info" class="mt-1 mb-1 mr-2" v-for="item in tags.get(itemfather)">{{ item }}</el-tag>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="18" :offset="1">
        <el-carousel trigger="click" height="440px">
          <el-carousel-item v-for="item in myAddressLink" :key="item">
            <el-image
                :src="item"
                style="width: inherit; height: inherit"
            ></el-image>
          </el-carousel-item>
        </el-carousel>
      </el-col>

    </el-row>
    <el-row class="mt-6">
      <el-col :span="5">
        <div
            class="
              bg-clockbg
              flex
              justify-between
              items-center
              cursor-pointer
            "
        >
          <div class="text-white font-bold text-xl ml-9">今日<br/>推荐</div>
          <img
              src="../assets/2016.png"
              class="mr-9"
              width="120"
              height="120"
          />
        </div>
      </el-col>
      <el-col :span="5" :offset="1">
        <div class="flex-1 flex justify-between items-start cursor-pointer">
          <div>
            <div class="ml-5 font-bold">真的有鱼</div>
            <div class="ml-5">开年福利篇</div>
          </div>
          <img
              src="../assets/tj.png"
              class="
                duration-500
                hover:translate-x-1 hover:
                transform
                hover:scale-150
              "
              width="120"
              height="120"
          />
        </div>
      </el-col>
      <el-col :span="5" :offset="1">
        <div class="flex-1 flex justify-between items-start cursor-pointer">
          <div>
            <div class="ml-5 font-bold">囤货过冬</div>
            <div class="ml-5">让爱早回家</div>
          </div>
          <img
              src="../assets/tj1.png"
              class="duration-500 hover: transform hover:scale-150"
              width="120"
              height="120"
          />
        </div>
      </el-col>
      <el-col :span="5" :offset="1">
        <div class="flex-1 flex justify-between items-start cursor-pointer">
          <div>
            <div class="ml-5 font-bold">浪漫情人节</div>
            <div class="ml-5">甜甜蜜蜜</div>
          </div>
          <img
              src="../assets/tj2.png"
              class="duration-500 hover: transform hover:scale-150"
              width="120"
              height="120"
          />
        </div>
      </el-col>

    </el-row>
    <div class=" mt-5">
      <div class="flex justify-start items-center">
        <div class="font-bold text-xl">活动</div>
        <div class="ml-2 text-gray-400">每期活动，优惠特享受</div>
      </div>
      <div class=" flex justify-around">
        <div class="cursor-pointer mr-3 relative">
          <img src="../assets/activity.jpg"/>
          <div class="absolute top-0 triangle">
          </div>
          <div class="absolute top-3 left-1 text-white font-bold">秒杀</div>
          <div class="absolute bottom-2 bg-white w-11/12 left-3 text-center">春节送礼优选</div>
        </div>
        <div class="cursor-pointer mr-3 relative">
          <img src="../assets/activity1.jpg"/>
          <div class=" absolute top-0 triangle" style="border-color: #b48c66 transparent transparent #b48c66"></div>
          <div class="absolute top-3 left-1 text-white font-bold">特惠</div>
          <div class="absolute bottom-2 bg-white w-11/12 left-3 text-center">春节送礼优选</div>
        </div>
        <div class="cursor-pointer mr-3 relative">
          <img src="../assets/activity2.jpg"/>
          <div class=" absolute top-0 triangle" style="border-color: #7fb113 transparent transparent #7fb113"></div>
          <div class="absolute top-3 left-1 text-white font-bold">团购</div>
          <div class="absolute bottom-2 bg-white w-11/12 left-3 text-center">春节送礼优选</div>
        </div>
        <div class="cursor-pointer relative">
          <img src="../assets/activity3.jpg"/>
          <div class=" absolute top-0 triangle" style="border-color: #0087e5 transparent transparent #0087e5"></div>
          <div class="absolute top-3 left-1 text-white font-bold">超值</div>
          <div class="absolute bottom-2 bg-white w-11/12 left-3 text-center">春节送礼优选</div>
        </div>
      </div>
    </div>
    <MyView></MyView>
    <Footer></Footer>

  </div>


</template>

<style scoped>


.middle {
  display: flex;
  align-items: center;
}

:deep(.el-input__inner):focus {
  border: solid 1px #f03726 !important;
}

li {
  list-style-type: none;
}

ul {
  margin: 0;
}

.myAllType {
  background-color: #d2364c;
  color: white;
  padding: 10px 30px;
  text-align: center;
}

.t-center {
  text-align: center;
  padding: 10px 30px;

}

:deep(.el-tag) {
  @apply cursor-pointer
}

:deep(.el-tag):hover {
  @apply text-orange-300
}

.myTag {
  padding: 10px 20px;
  text-align: center;
  font-weight: 700;
  cursor: pointer;
}

.myTag:hover {
  color: #ff6700;
}

.fontStyle {
  font-size: 16px;
  color: #fcff00;
  padding: 10px 50px;
  background-color: #e22b40;
}

.margin-l {
  margin-left: 10px;
}

.triangle {
  border-width: 40px;
  border-style: solid;
  border-color: #9b0d5f transparent transparent #9b0d5f;
}
</style>
